import { create } from "zustand";
import ContainerDev from "../materials/Container/dev";
import ContainerProd from "../materials/Container/prod";
import ButtonDev from "../materials/Button/dev";
import ButtonProd from "../materials/Button/prod";
import PageDev from "../materials/Page/dev";
import PageProd from "../materials/Page/prod";
import InputDev from "../materials/Input/dev";
import InputProd from "../materials/Input/prod";
import ModalDev from "../materials/Model/dev";
import ModalProd from "../materials/Model/prod";
import TableDev from "../materials/Table/dev";
import TableProd from "../materials/Table/prod";
import TableColumnDev from "@editor/materials/TableColumn/dev";
import TableColumnProd from "@editor/materials/TableColumn/prod";
import FormDev from "@editor/materials/Form/dev";
import FormProd from "@editor/materials/Form/prod";
import FormItemDev from "@editor/materials/FormItem/dev"
import FormItemProd from "@editor/materials/FormItem/prod"

export interface ComponentSetter {
    name: string;   // 表示要组件的哪个属性/样式
    label: string;  // 组件的属性/样式的描述
    type: string;   // 组件属性/样式设置以什么形式展示（select,input等等）
    [key: string]: any; // 扩展配置项，如type为select时要有options扩展项
}

export interface ComponentEvent {
    name: string;
    label: string;
}

export interface ComponentMethod {
    name: string
    label: string
}

export interface ComponentConfig {
    name: string;
    defaultProps: Record<string, any>;
    desc: string;
    setter?: ComponentSetter[]; // 组件动态属性配置
    stylesSetter?: ComponentSetter[]; // 组件动态样式配置
    events?: ComponentEvent[]; // 组件动态行为(event)配置
    // 组件有编辑状态和预览状态，编辑和预览有不同的展示形式，所以我们要通过变量区分一下
    dev: any;
    prod: any;
    methods?: ComponentMethod[]; // 组件对外暴露哪些方法（用于组件联动）
}

interface State {
    componentConfig: { [key: string]: ComponentConfig }
}

interface Action {
    registerComponent: (name: string, componentConfig: ComponentConfig) => void
}

export const useComponentConfigStore = create<State & Action>((set) => ({
    componentConfig: {
        Page: {
            name: 'Page',
            defaultProps: {},
            desc: '页面',
            dev: PageDev,
            prod: PageProd
        },
        Container: {
            name: 'Container',
            defaultProps: {},
            desc: '容器',
            dev: ContainerDev,
            prod: ContainerProd
        },
        Button: {
            name: 'Button',
            defaultProps: {
                type: 'primary',
                text: '按钮'
            },
            setter: [
                {
                    name: 'type',
                    label: '按钮类型',
                    type: 'select',
                    options: [
                        { label: '主按钮', value: 'primary' },
                        { label: '次按钮', value: 'default' }
                    ]
                },
                {
                    name: 'text',
                    label: '文本',
                    type: 'input'
                }
            ],
            stylesSetter: [
                {
                    name: 'width',
                    label: '宽度',
                    type: 'inputNumber'
                },
                {
                    name: 'height',
                    label: '高度',
                    type: 'inputNumber'
                }
            ],
            events: [
                { name: 'onClick', label: '点击事件' },
                { name: 'onDobuleClick', label: '双击事件' },
            ],
            desc: '按钮',
            dev: ButtonDev,
            prod: ButtonProd
        },
        Input: {
            name: 'Input',
            defaultProps: {},
            desc: '输入框',
            dev: InputDev,
            prod: InputProd
        },
        Modal: {
            name: 'Modal',
            defaultProps: {
                title: '弹窗'
            },
            desc: "弹窗",
            dev: ModalDev,
            prod: ModalProd,
            setter: [
                {
                    name: 'title',
                    label: '标题',
                    type: 'input'
                }
            ],
            stylesSetter: [],
            events: [
                {
                    name: 'onOk',
                    label: '确认事件'
                },
                {
                    name: 'onCancel',
                    label: '取消事件'
                }
            ],
            methods: [
                { name: 'open', label: '打开弹窗' },
                { name: 'close', label: '关闭弹窗' }
            ]
        },
        Table: {
            name: "Table",
            defaultProps: {},
            desc: "表格",
            setter: [
                {
                    name: 'url',
                    label: 'url',
                    type: 'input'
                }
            ],
            dev: TableDev,
            prod: TableProd
        },
        TableColumn: {
            name: 'TableColumn',
            defaultProps: {
                dataIndex: `col_${new Date().getTime()}`,
                title: '列名'
            },
            desc: "表格列",
            setter: [
                {
                    name: 'type',
                    label: '类型',
                    type: 'select',
                    options: [
                        { label: '文本', value: 'text' },
                        { label: '日期', value: 'date' }
                    ]
                },
                {
                    name: 'title',
                    label: '标题',
                    type: 'input'
                },
                {
                    name: 'dataIndex',
                    label: '字段',
                    type: 'input'
                }
            ],
            dev: TableColumnDev,
            prod: TableColumnProd
        },
        Form: {
            name: 'Form',
            defaultProps: {},
            desc: '表单',
            setter: [
                {
                    name: 'title',
                    label: '标题',
                    type: 'input'
                }
            ],
            events: [
                {
                    name: 'onFinish',
                    label: '提交事件'
                }
            ],
            methods: [
                { name: 'submit', label: '提交' }
            ],
            dev: FormDev,
            prod: FormProd
        },
        FormItem: {
            name: 'FormItem',
            desc: '表单项',
            defaultProps: {
                name: new Date().getTime(),
                label: '姓名'
            },
            setter: [
                {
                    name: 'type',
                    label: '类型',
                    type: 'select',
                    options: [
                        { label: '输入框', value: 'input' },
                        { label: '日期', value: 'date' }
                    ]
                },
                {
                    name: 'label',
                    label: '标题',
                    type: 'input'
                },
                {
                    name: 'name',
                    label: '字段',
                    type: 'input'
                },
                {
                    name: 'rules',
                    label: '校验',
                    type: 'select',
                    options: [
                        { label: '必填', value: 'required' }
                    ]
                }
            ],
            dev: FormItemDev,
            prod: FormItemProd
        }
    },
    registerComponent: (name, componentConfig) => set(state => {
        return {
            ...state,
            componentConfig: {
                ...state.componentConfig,
                [name]: componentConfig
            }
        }
    })
}))